<template>
    <div>
        <div class="div-card crad1">
            <el-card class="box-card">
                <div class="tl-header" >
                    <img src="/images/user/go.png" alt="" class="tl-img">
                    <span class="ml-2">Go 技术论坛</span>
                </div>
                <div  class="tl-content">
                    Go（又称 Golang）是 Google 开发的一种静态强类型、编译型、并发型，并具有垃圾回收功能的编程语言。Go 被誉为是未来的服务器端编程语言。
                </div>
                <div class="tl-button">
                    <el-button type="primary" plain class="tl-button-but">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                        <span>加入社区</span>  
                    </el-button>
                    <el-button type="primary" plain class="tl-button-but">
                        <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                        <span>发帖</span>                     
                    </el-button>
                </div>
            </el-card>
        </div>

        <div class="div-card card2">
            <el-card class="box-card">
                <div slot="header" class="clearfix card2">
                    <i class="fa fa-book" aria-hidden="true"></i>
                    <span class="ml-2">社区文档</span>
                </div>
                <div v-for="o in 4" :key="o" class="text item">
                    <el-link :underline="false" href="/home">
                        <img src="/images/user/pig.png" alt="" class="crad2-img">
                        <span class="ml-3">《{{'列表内容 ' + o }}》</span>  
                    </el-link>
                                
                </div>
            </el-card>
        </div>

        <div class="div-card card3">
            <el-card class="box-card" :body-style="{ padding: '0px' }">
                <div class="card3-div">
                    <div class="card3-header">
                        <a href="#">
                            <img :src="head_pic" class="card3-header-img">
                        </a>
                    </div>
                    <div class="card3-main">
                        <el-row class="card3-row nike">
                            <a href="">{{user_name}}</a>
                        </el-row>
                        <el-row class="card3-row trophy">
                            <a href="">
                                <span>等级：</span>
                                <i class="el-icon-star-on" background-color="orange"></i>
                                
                            </a>
                        </el-row>
                        <el-row class="card3-row desc">只是一条咸鱼罢了</el-row>
                    </div>
                </div>          
                <div class="card3-footer">
                    <div class="card3-footer-content">
                        <el-row>
                            <el-button type="primary" class="card3-footer-but" plain>
                                <i class="fa fa-plus" aria-hidden="true"></i>
                                <span>关注</span>                             
                            </el-button>
                        </el-row>
                        <el-row>
                            <el-button type="primary" class="card3-footer-but"  plain>
                                <i class="fa fa-envelope" aria-hidden="true"></i>
                                <span>私信</span>                           
                            </el-button>
                        </el-row>
                    </div>           
                </div>     
            </el-card>
        </div>
        
    </div>
</template>

<script>
export default {
    data(){

        return{
            user_name: window.user.name,
            head_pic: window.user.head_pic,
        }
    }
}
</script>

<style>
    .fa{
        color: #409EFF;
    }
    .el-button:hover .fa{
        color:#fff;
    }
    .div-card{
        margin-bottom:10px;
    }

/******* card1 start ******************/
    .crad1 .el-card {
        border-top: 2px solid #1196e2;
    }
   
    .tl-header{
        height: 35px;
        border-bottom: 1px solid #EBEEF5;
        box-sizing: border-box;
        margin-top:-10px;
        /*margin-left:-10px;*/
        
    }
    .ml-2 {
        font-weight: 500;
        font-size: 16px;
        color: #777;
        position: absolute;
        margin-left: 10px;

    }
    .tl-img{
        width:22px;
        height:22px;
    }
    .tl-content{
        font-weight: 500;
        font-size: 13px;
        color: #777;
        line-height: 22px;
        border-bottom: 1px solid #EBEEF5;
        padding:10px;
    }
    
    .tl-button-but{
        margin: 5px 5px;
        width: 100px;
    }
  
/******* card1 stop ********************/

/******* card2 start *******************/
    .card2 .el-card__header {
        padding: 10px 20px;
    }
    
    .fa-book{
        color: #888c8e;
        padding-top:3px;
    }
    .crad2-img{
        width:28px;
        height:28px;
        border-radius: 50%; 
        -o-border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
    }
    .ml-3{
        font-weight: 500;
        font-size: 14px;
        margin-left: 10px;
        margin-top: 5px;
        position: absolute;
        width: 200px;
    }
    .card2 .item{
        margin-bottom: 14px;
    }

/******* card2 stop *******************/
    
/******* card3 start *******************/

    .card3-div,.card3-footer-content{
        padding:20px;
    }

    .card3-header{
        margin: 0 auto;
        text-align: center;
        padding-bottom: 20px;
    }
    .card3-header-img{
        width:80px;
        height:auto;
        border-radius: 50%;

    }

    .card3-main{
        border-top:1px solid #EBEEF5;
    }
    .card3-row{
        margin: 15px auto;
        text-align: center;
    }

    .desc{
        font-size: 13px;
        color:rgba(0,0,0,.68)
    }

    .card3-footer{
        border-top:1px solid #EBEEF5;
    }

    .card3-footer-but{
        margin:5px auto;
        width:100%;
    }
    .card3-footer-but span{
        font-size:14px;
    }

/******* card3 stop *******************/



    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

</style>